<template>
  <div class="activity-awards-card">
    <div style="color: #1D2129;margin-bottom: 24px;">
      户外活动营地参加和获得的荣誉与奖励（自2011年起）
    </div>
    <div class="statistics-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-line"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">全国性活动</div>
          <div class="stat-value">{{ nationNum }}</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-analysis"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">省市级活动</div>
          <div class="stat-value">{{ provinceNum }}</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-board"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">其他活动</div>
          <div class="stat-value">{{ otherNum }}</div>
        </div>
      </div>
    </div>

    <div class="table-section">
      <div class="table-header">
        <span class="title">参与活动明细</span>
        <span class="unit"></span>
        <div class="header-right">
          <el-button type="text">全部 ></el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="schoolName" label="学校名称" />
        <el-table-column prop="activityType" label="比赛/活动等级" />
        <el-table-column prop="joinTime" label="参与时间" />
        <el-table-column prop="result" label="比赛/活动名称、奖励和荣誉" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { gethonor } from "@/api/statistics";
export default {
  name: "ActivityAwardsCard",
  data() {
    return {
      tableData: [],
      provinceNum: "",
      otherNum: "",
      nationNum: ""
    };
  },
  mounted() {
    this.datalist();
  },

  methods: {
    datalist() {
      gethonor().then(res => {
        this.tableData = res.data.list;
        this.provinceNum = res.data.provinceNum;
        this.otherNum = res.data.otherNum;
        this.nationNum = res.data.nationNum;
      });
    }
  }
};
</script>

<style scoped>
.activity-awards-card {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  padding: 20px 32px;
}

.statistics-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon i {
  font-size: 24px;
  color: #fff;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.table-section {
  background: #fff;
  border-radius: 8px;
}

.table-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 16px;
}

.table-header .title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.table-header .unit {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.header-right {
  margin-left: auto;
}

:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f5f7fa;
}
</style>
